<template>
  <div class="doorway_page">
    <div class="content">
      <div class="bg">
        <img src="../../assets/homeImg/home-bg@2x.png" alt="">
      </div>
      <div class="con-icon"></div>
      <div class="con-mark"></div>
      <div class="left-btn" @click="toRight"></div>
      <div class="carousel" :style="{transform: 'rotateX(60deg)'}">
        <div class="img-con" :style="{width: box.w+'px', height: box.h+'px', transform: `rotateZ(${rotate}deg)`}">
          <div v-for="(item, index) in data" :key="item.id" class="icon" :class="[currentImg == index && 'active']" :style="{
              width: img.w+'px',
              height: img.h+'px',
              left: item.left+'px',
              top: item.top+'px',
              transformOrigin: '50% 48%',
              transform: `rotateZ(${imgRotate}deg) rotateX(-60deg)`
            }"
            @click="focusCurrent(index)"
          >
            <div 
              class="icon-img"
              :class="[item.icon]"
              :style="{
                transform: `scale(${scaleIndex(index)}) translateY(${scaleIndex(index) < 1 ? -scaleIndex(index): -scaleIndex(index)*8}px)`,
              }"
            ></div>
            <div class="con-text">
              <h5 class="title" :style="{
                fontSize: scaleIndex(index)*titleFontSizeBase+'px'
              }">{{item.name}}</h5>
              <p class="mark">{{item.mark}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right-btn" @click="toLeft"></div>
    </div>
  </div>
</template>
<script lang="ts">
import {getCarousel3dList} from '@http'
import {debounce} from "lodash"
import { defineComponent } from 'vue';
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/index'
interface EleList {
  name?: string | number,
  left?: number,
  top?: number,
  id?: number,
  icon?: string,
  mark?: string
}
interface Carousel3dRes extends EleList {
  name: string | number,
  id: number
}
interface EleStyle {
  w?: number,
  h?: number
}
export default defineComponent({
  name: "Carousel3d",
  data() {
    return {
      data: <EleList[]>[],
      activeId: null,
      line: 595,   //  半径的 长度
      img: { w: 70, h: 170 },
      box: { w: 1200, h: 1200 },
      Bimg: <EleStyle>{},
      Bbox: <EleStyle>{},
      rotate: 0,
      imgRotate: 0,
      len: 0,
      lenR: 0,
      currentImg: 0,
      titleFontSizeBase: 16
    }
  },
  mounted(){
    // 监听页面分辨率改变 刷新页面
    window.addEventListener('resize', debounce(() => {
      this.$router.go(0)
    }))
    this.setViewSizeIcon()
    getCarousel3dList<Carousel3dRes[]>().then((res) => {
      if(res.code == 200){
        this.len = res.data.length
        this.lenR = 360 / this.len
        if(this.line * 2 > this.box.w || this.line * 2 > this.box.h){
          return new Error('圆的半径不能超过父级的大小！')
        }
        const _data = res.data.map((element: Carousel3dRes, index: number): EleList => {
          const ele = this.getPointList(index * this.lenR)
          return {
            ...element,
            left: ele.x,
            top: ele.y
          }
        });
        this.data = _data
      }else{
        message.error(res.msg)
      }
    })
  },
  methods: {
    setViewSizeIcon(){
      const viewW = window.innerWidth
      const viewH = window.innerHeight
      if(viewW <= 1600 || viewH <= 900){
        this.titleFontSizeBase = 14
        this.line = 380
        this.img = { w: 60, h: 131 }
        this.box = { w: 800, h: 800 }
      }
      this.Bimg = {w: this.img.w / 2, h: this.img.h / 2}
      this.Bbox = {w: this.box.w / 2, h: this.box.h / 2}
    },
    scaleIndex(index: number){
      const max = 1.5
      const min = 0.75
      if(index === this.currentImg){
        return max
      }
      const temp = index - this.currentImg
      const r = temp > 0 ? temp : temp+this.data.length
      const l = temp < 0 ? Math.abs(temp) : this.data.length - temp
      const c = r < l ? r : l
      // console.log(r, l, 'min >>>>>>>', c);
      return max-((max - min)*2/this.data.length*c)
    },
    focusCurrent(index: number){
      if(index === this.currentImg){
        const item  = this.data[index]
        message.error('你点击了图片')
        return
      }
      const temp = index - this.currentImg
      const r =temp > 0 ? temp : temp+this.data.length
      const l = temp < 0 ? Math.abs(temp) : this.data.length - temp
      if(r < l){
        this.setEleImg(r,'-', index)
      }else{
        this.setEleImg(l,'+', index)
      }
    },
    setEleImg(count: number, type: '+'|'-', i: number){
      this.currentImg = i
      if(type == '+'){
        this.rotate = this.rotate + this.lenR * count
      }else{
        this.rotate = this.rotate - this.lenR * count
      }
      this.imgRotate = -this.rotate
    },
    toRight(){
      let index = this.currentImg + 1
      if(index >= this.data.length){
        index = index - this.data.length 
      }
      this.setEleImg(1, '-', index)
    },
    toLeft(){
      let index = this.currentImg - 1
      if(index < 0){
        index = index + this.data.length 
      }
      this.setEleImg(1, '+', index)
    },
    getPointList(r: number){
      // 计算对角线的长度所需基数（2pi/360）
      const PI = 0.017453292
      //  偏移度数
      const siteOffsetR = 14
      const bw = this.Bbox.w || 0
      const bh = this.Bbox.h || 0
      const iw = this.Bimg.w || 0
      const ih = this.Bimg.h || 0
      const x =  bw - this.line * Math.sin((r + siteOffsetR) * PI) - iw
      const y =  bh + this.line * Math.cos((r + siteOffsetR) * PI) - ih
      return {x,y,r}
    }
  }
})
</script>
<style lang="less" scoped>
@keyframes bt {
  0%{
    transform: translateY(0px) scale(1);
  }
  50%{
    transform: translateY(-9px) scale(1.05);
  }
  100%{
    transform: translateY(0px) scale(1);
  }
}
.doorway_page{
  position: relative;
  width: 100%;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("../../assets/homeImg/portal-content-bg@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .page-header{
    position: relative;
    height: 91px;
    width: 100%;
    // min-width: 1440px;
    background-image: url("../../assets/homeImg/portal-content-header-bg@2x.png");
    background-repeat: no-repeat;
    background-size: 100%;
    .title{
      height: 56px;
      color: #D1FFE3;
      font-size: 40px;
      font-weight: 500;
      padding-top: 16px;
      letter-spacing: 4px;
      box-sizing: content-box;
      text-align: center;
    }
    .user-box{
      position: absolute;
      right: 10px;
      top: 0px;
      z-index: 100;
      height: 66px;
      line-height: 66px;
      cursor: pointer;
    }
    .account-name{
      color: #D1FFE3;
    }
  }
  .content{
    position: absolute;
    width: 1568px;
    height: 807px;
    left: 50%;
    top: calc(50% + 41px);
    transform: translateY(-50%) translateX(-50%);
    .bg{
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1568px;
      height: 807px;
      transform-style: preserve-3d;
      transform: translateX(-50%) translateY(-50%);
      img{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .con-icon{
      position: absolute;
      z-index: 100;
      width: 65px;
      height: 65px;
      left: calc(50% - 64px);
      top: 118px;
      background-image: url("../../assets/homeImg/home-bg-icon@2x.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      animation: bt 2s ease-in infinite;
    }
    .con-mark{
      position: absolute;
      z-index: 100;
      width: 107px;
      height: 98px;
      background-image: url("../../assets/homeImg/home-bg-icon-mark@2x.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      left: calc(50% - 86px);
      top: 90px;
    }
    .left-btn{
      width: 50px;
      height: 50px;
      position: absolute;
      left:-50px;
      top: 350px;
      z-index: 200;
      transform: rotateX(180deg);
      background-image: url("../../assets/homeImg/left-btn@2x.png");
      background-size: 100%;
      cursor: pointer;
      &:hover{
        background-image: url("../../assets/homeImg/left-btn-active@2x.png");
      }
    }
    .right-btn{
      width: 50px;
      height: 50px;
      position: absolute;
      right:-50px;
      top: 350px;
      z-index: 200;
      background-image: url("../../assets/homeImg/right-btn@2x.png");
      background-size: 100%;
      cursor: pointer;
      &:hover{
        background-image: url("../../assets/homeImg/right-btn-active@2x.png");
      }
    }
  }
  .carousel{
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    margin: 0 auto;
    border: 1px solid transparent;
    .img-con{
      position: relative;
      width: 1200px;
      height: 1200px;
      margin: -145px auto 0;
      transform-style: preserve-3d;
      transition: transform 0.3s, -webkit-transform 0.4s;
      .icon{
        width: 100px;
        // height: 100px;
        position: absolute;
        transition: transform 0.3s, -webkit-transform 0.4s;
        cursor: pointer;
        .icon-img{
          display: block;
          width: 100%;
          height: 70px;
          background-size: 100% 100%;
          transition: all 0.3s ease-in-out;
        }
        &.active .loophole{
          background-image: url("../../assets/homeImg/loophole-active@2x.png");
        }
        &.active .testAll{
          background-image: url("../../assets/homeImg/testAll-active@2x.png");
        }
        &.active .intelligence{
          background-image: url("../../assets/homeImg/intelligence-active@2x.png");
        }
        &.active .hack{
          background-image: url("../../assets/homeImg/hack-active@2x.png");
        }
        &.active .loopholeDB{
          background-image: url("../../assets/homeImg/loopholeDB-active@2x.png");
        }
        &.active .portal{
          background-image: url("../../assets/homeImg/portal-active@2x.png");
        }
        .loophole{
          background-image: url("../../assets/homeImg/loophole@2x.png");
        }
        .testAll{
          background-image: url("../../assets/homeImg/testAll@2x.png");
        }
        .intelligence{
          background-image: url("../../assets/homeImg/intelligence@2x.png");
        }
        .hack{
          background-image: url("../../assets/homeImg/hack@2x.png");
        }
        .loopholeDB{
          background-image: url("../../assets/homeImg/loopholeDB@2x.png");
        }
        .portal{
          background-image: url("../../assets/homeImg/portal@2x.png");
        }
        .con-text{
          width: 300px;
          // height: 80px;
          color: #00D9A5;
          transform: translateX(-115px);
          .title{
            width: 100%;
            height: 34px;
            font-size: 24px;
            color: #00D9A5;
            letter-spacing: 1px;
            text-align: center;
            font-weight: 400;
          }
          .mark{
            display: none;
            width: 100%;
            font-size: 14px;
            color: #6FFFDD;
            letter-spacing:2px;
            text-align: center;
            // line-height: 1.5;
            // font-weight: 400;
          }
        }
        &.active{
          .con-text{
            padding-top: 4px;
          }
          .title{
            color: #6FFFDD;
          }
          .mark{
            display: block;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1600px) {
  .doorway_page .page-header{
    height: 65px;
    .title{
      font-size: 32px;
      padding-top: 10px;
    }
    .user-box{
      height: 50px;
      line-height: 50px;
    }
  }
  .doorway_page .content{
    width: 100%;
    height: 560px;
    .bg{
      width: 1000px;
      height: 523px;
      top: -20px;
      transform: translateX(-50%) translateY(0);
    }
    .con-icon{
      width: 35px;
      height: 35px;
      left: calc(50% - 39px);
      top: 56px;
    }
    .con-mark{
      width: 69px;
      height: 66px;
      top: 35px;
      left: calc(50% - 55px);
    }
    .left-btn{
      left:50px;
      top: calc(50% - 50px);
    }
    .right-btn{
      right:50px;
      top: calc(50% - 50px);
    }
  }
  .doorway_page .carousel{
    .img-con{
      margin: -160px auto 0;
      z-index:200;
      .icon{
        .icon-img{
          height: 60px;
        }
        .con-text{
          width: 270px;
          transform: translateX(-105px);
          .title{
            height: 30px;
            font-size: 16px;
          }
          .mark{
            font-size: 14px;
            // font-weight: 200;
            // transform: translateY(-8px) scale(0.6667);
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1100px) {
  .doorway_page .page-header{
    height: 65px;
    .title{
      font-size: 27px;
      padding-top: 6px;
    }
    .user-box{
      height: 40px;
      line-height: 40px;
    }
  }
  .doorway_page .content{
    .left-btn,.right-btn{
      display: none;
    }
  }
}
</style>